// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    /**服务器服务器是否连接成功 */
    socketOpen: false,
    /**竖向滚动条的位置 */
    scrollTop: 0,
    msgList: [
      {
        id: "msg_1",
        role: "other",
        txt: "您好，请问有什么可以帮您~"
      }
    ]
  },

  /**
   * 发送消息
   */
  sendMsg: function(e) {
    var _this = this
    let {
      msg
    } = e.detail.value
    console.log(msg)
    /**校验 */
    if (msg) {
      var msgList = this.data.msgList;
      wx.sendSocketMessage({
        data: [msg],
      })
      /**自己的消息先添加进列表 */
      var mineData = {
        id: "msg_" + msgList.length,
        role: "me",
        txt: msg
      }
      msgList.push(mineData)
      /**重新设置数据 */
      _this.setData({
        msgList: msgList
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var _this = this
    /**连接服务器 */
    wx.connectSocket({
      url: 'ws://47.107.122.212:3003'
    })
    /**服务器连接成功 */
    wx.onSocketOpen(function() {
      _this.setData({
        socketOpen: true
      })
      console.log("/pages/service/service-sendMsg:服务器连接成功")
    })
    console.log(_this.data.socketOpen)
    /** 监听服务端返回的数据 */
    wx.onSocketMessage(msg => {
      var msgList = this.data.msgList;
      /**返回的消息 */
      var data = JSON.parse(msg.data)
      console.log("返回的数据")
      console.log(data)
      /**添加进服务器返回的数据 */
      var serverData = {
        id: "msg_" + msgList.length,
        role: "other",
        txt: data.content
      }
      msgList.push(serverData)
      /**重新设置数据 */
      _this.setData({
        msgList: msgList
      })
      console.log("最新的")
      console.log(_this.data.msgList)
      /**清空输入框 */
      _this.rollingBottom()
    })
  },

  /**
   * 滚动到最下方
   */
  rollingBottom() {
    wx.createSelectorQuery().selectAll('.msgList').boundingClientRect(rects => {
      rects.forEach(rect => {
        this.setData({
          scrollTop:rect.bottom
        })
      })
    }).exec()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
    wx.onSocketClose();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})